<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4.0 user-scalable=yes">
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> -->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="x-dns-prefetch-control" content="on" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <title>评论</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/comments.css">
</head>
<body>
  <div class="filipino-info-container">
    <div class="passport-info">
      <div class="line clearfix">
        <span class="line-left float-l">护照号No.</span>
        <span id="passport" class="line-right float-r"></span>
      </div>
    </div>
  </div>
  <div class="comment-container">
    <h3>评价<span class="comments-count">(<ins id="comment-count">0</ins>)</span></h3>
    <div class="comment-wrapper">
      <!-- <div class="commment">
        <div class="comment-content-container">
          <p>心细，勤快，还能辅导孩子学习。</p>
          <img src="./image/75011c7968b493e925cb74eebaff9fdf.jpg" alt="" onclick="previewImg(this)">
        </div>
        <div class="commentator-container clearfix">
          <span class="commentator-wrapper float-l">评价人：<span class="commentator">Jacky Chen</span></span>
          <span class="comment-time float-r">2018-05-12 13:23</span>
        </div>
      </div>

      <div class="commment">
        <div class="comment-content-container">
          <p>心细，勤快，还能辅导孩子学习。</p>
        </div>
        <div class="commentator-container clearfix">
          <span class="commentator-wrapper float-l">评价人：<span class="commentator">Jacky Chen</span></span>
          <span class="comment-time float-r">2018-05-12 13:23</span>
        </div>
      </div> -->
    </div>
  </div>

  <div class="preview-wrapper">
    <div id="preview-container">
      <img id="preview" src="">
    </div>
  </div>

  <div class="notification">
    <p>没有更多评论了</p>
  </div>

  <div class="add-comment">
    <a class="add-btn">
      <!-- <img src="./img/input.png" alt=""> -->
      我要点评
    </a>
  </div>
</body>
</html>
<script type="text/javascript" src="./js/index.js"></script>
<script>
var passport = document.getElementById("passport"),
    comment_count = document.getElementById("comment-count"),
    comment_wrapper = document.getElementsByClassName("comment-wrapper")[0],
    preview_wrapper = document.getElementsByClassName("preview-wrapper")[0],
    preview_container = document.getElementById("preview-container"),
    preview = document.getElementById("preview"),
    add_btn = document.getElementsByClassName("add-btn")[0];

var comment_data, passportNo, comment_time;
function search(){
  passportNo = parameterFromUrl("passportNo");
  // console.log(passportNo)
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      var res = JSON.parse(xhr.responseText)
      comment_data = res
      // console.log('passportNo',comment_data.passportNo)
      passport.innerText = comment_data.passportNo;
      comment_count.innerText = comment_data.comment_count;
      comment_data.comments.forEach(item => {
        if(item.comment_pic){
          comment_wrapper.innerHTML += `<div class="commment">
              <div class="comment-content-container">
                <p>${item.comment}</p>
                <img src="${item.comment_pic}" alt="图片加载失败" onclick="previewImg(this)">
              </div>
              <div class="commentator-container clearfix">
                <span class="commentator-wrapper float-l">评价人：<span class="commentator">${item.phone_home}</span></span>
                <span class="comment-time float-r">${item.create_date}</span>
              </div>
            </div>`
        }else{
          comment_wrapper.innerHTML += `<div class="commment">
              <div class="comment-content-container">
                <p>${item.comment}</p>
              </div>
              <div class="commentator-container clearfix">
                <span class="commentator-wrapper float-l">评价人：<span class="commentator">${item.phone_home}</span></span>
                <span class="comment-time float-r">${item.create_date}</span>
              </div>
            </div>`
        }
      })
    }
  }

  xhr.open("POST", api+"/comment/searchcomment", false);
  let reqStr = JSON.stringify({passportNo});

  xhr.send(reqStr)
}

search()

function previewImg(img){
  // console.log(img.src)
  preview_wrapper.style.display = "block";
  preview.src = img.src;
  let imgRatio = img.naturalHeight / img.naturalWidth;
  let windowRatio = window.innerHeight / window.innerWidth;
  if(imgRatio > windowRatio){
    preview.style.height = window.innerHeight + "px";
    preview.style.width = ""
  }else{
    preview.style.width = "100%";
    preview.style.height = "";
  }
}

preview_wrapper.onclick = closePreview;
// preview.ontouchstart = zoomPreview;

function closePreview(){
  preview_wrapper.style.display = "none";
  // preview_container.style.width = "120%"
  // let delay = setTimeout(function(){
  //   console.log('click')
  //   preview_wrapper.style.display = "none"
  // },200)
  // console.log('delay',delay)
  // if(delay >= 2){
  //   zoomPreview()
  //   for(i=1;i<delay+1;i ++){
  //     clearTimeout(i)
  //   }
  // }
}

// 图片缩放
var lastZoomRatio = 1;
function zoomPreview(e){
  // alert("touch length"+e.touches.length)
  if(e.touches.length == 2){
    console.log(e)
    let originWidth = Math.abs(e.touches[0].clientX - e.touches[1].clientX);
    let originHeight = Math.abs(e.touches[0].clientY - e.touches[1].clientY);
    let originDimension = Math.sqrt(originWidth * originWidth + originHeight * originHeight).toFixed(2);
    // alert("dbtouch"+originWidth+","+originHeight)
    let zoomRatio;
    preview.ontouchmove = function(emove){
      let currentWidth = Math.abs(emove.touches[0].clientX - emove.touches[1].clientX);
      let currentHeight = Math.abs(emove.touches[0].clientY - emove.touches[1].clientY);
      let currentDimension = Math.sqrt(currentWidth * currentWidth + currentHeight * currentHeight).toFixed(2);
      zoomRatio = (currentDimension / originDimension).toFixed(2);
      preview_container.style.width = lastZoomRatio * zoomRatio * 100 + "%";
    }
    preview.ontouchend = function(){
      lastZoomRatio = (lastZoomRatio * zoomRatio).toFixed(2);
      alert(zoomRatio + "-" + lastZoomRatio)
    }
  }
}

// 图片拖拽
var lastX = 0, lastY = 0;
function dragPreview(e){
  console.log(e)
  // console.log("double click")
  let originX = e.touches[0].clientX;
  let originY = e.touches[0].clientY;
  let transX = lastX, transY = lastY;
  // console.log("touch start", originX)
  preview.ontouchmove = function(event){
    let currentX = event.touches[0].clientX;
    let currentY = event.touches[0].clientY;
    // console.log("touch move", currentX)
    let moveX = currentX - originX;
    let moveY = currentY - originY;
    transX = lastX + moveX;
    transY = lastY + moveY;
    // console.log("last", lastX, lastY)
    // console.log("move", moveX, moveY)
    // console.log("trans", transX, transY)
    // console.log(typeof transX, typeof lastX, typeof moveX)
    preview.style.transform = "translate("+transX+"px,"+transY+"px)"
  }
  preview.ontouchend = function(){
    lastX = transX;
    lastY = transY;
    // console.log("lastX",lastX,"lastY",lastY)
  }
}

add_btn.onclick = add_comment

function add_comment(){
  // window.location = "./comment-add.html?passportNo="+passportNo
  location.replace("./comment-add.html?passportNo="+passportNo)
}

</script>